import React from 'react';
import { useFetchLogicHook } from './utils/useFetchLogicHook';
import CharacterListItem from './CharacterListItem';

const CharacterList: React.FC = (): JSX.Element => {
    const [
        name, 
        characters, 
        page, 
        totalPages, 
        error, 
        isLoading,
        handleNameChage,
        handeleNextPage,
        handelePreviousPage,
    ] = useFetchLogicHook();
 
    return(<>
        <input
            className="input-style"
            type='name'
            placeholder='Type name here...'
            value={name}
            onChange={handleNameChage}
        />
        {isLoading && (
            <span className="loading-style">
                Loading...
            </span>
        )}
        {error && (
            <p className="error-style">
                {error}
            </p>
        )}
        <nav className='pagination'>
            <button
                type="button"
                onClick={handelePreviousPage}
                disabled={page === 1}
            >Prev</button>
            <button
                type="button"
                onClick={handeleNextPage}
                disabled={page === totalPages}
            >Next</button>
        </nav>
        <CharacterListItem characters={characters}/>
    </>);
};

export default CharacterList;